<template>
  <div class="pay-results">
    <div class="pay-status" v-if="paySuc==1">
      <van-icon name="passed" />
      <h2>订单支付成功！</h2>
      <div class="pay-bottom">
        <p class="title">可进入个人中心，查看送样信息</p>
        <p class="des">
          <span>{{countDownNum}}</span>秒后自动跳转到个人中心，如未跳转请点击
        </p>
        <p class="btn" @click="goUserCenter()">请进入个人中心</p>
      </div>
      <div class="sampling">
        <p>
          <span class="red">了解如何取样，</span>请点击下方取样方法按钮
        </p>
        <p class="btn" @click="goSampling()">取样方法</p>
      </div>
    </div>
    <div class="pay-status" v-else>
      <van-icon name="close" />
      <h2 class="red">很抱歉，付款失败！</h2>
      <div class="pay-bottom">
        <p class="title">可进入个人中心，待付款进行重新付款</p>
        <p class="des">
          <span>{{countDownNum}}</span>秒后自动跳转到个人中心－待付款，如未跳转请点击
        </p>
        <p class="btn" @click="goNoPay()">个人中心-待付款</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PayNotify",
  components: {},
  data() {
    return {
      paySuc: 1,
      countDownNum: 5,
      timer: "",
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.paySuc = this.$route.query.pay;
      this.countDown();
    },
    goSampling() {
      this.$router.push({
        name: "sampling",
      });
    },
    goExpress() {
      this.$router.push({
        name: "express",
      });
    },
    goUserCenter() {
      this.$router.push({
        name: "planting-code",
      });
    },
    goNoPay() {
      this.$router.push({
        name: "all-orders",
        query: {
          orders_id: 10,
        },
      });
    },
    countDown() {
      this.timer = setInterval(() => {
        this.countDownNum--;
        if (this.countDownNum <= 0) {
          clearInterval(this.timer);
          if (this.paySuc == 1) {
            this.goUserCenter();
          } else {
            this.goNoPay();
          }
        }
      }, 1000);
    },
  },
  computed: {},
  filters: {},
  watch: {},
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>
<style scoped>
.pay-status {
  padding: 50px 20px;
  text-align: center;
}
.pay-status i {
  color: #3aad98;
  font-size: 100px;
}
h2 {
  color: #15c182;
  font-size: 16px;
  font-weight: 400;
  margin: 20px 0 30px;
}
h2.red {
  color: #f5212d;
}
.pay-bottom {
  color: #686868;
  font-size: 14px;
  line-height: 30px;
}
.pay-bottom .des {
  color: #999;
}
.pay-bottom .des span {
  font-weight: bold;
  color: red;
  margin-right: 4px;
}
.pay-bottom span {
  color: #15c182;
}
.sampling .red {
  color: red;
}
.btn {
  width: 60%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #39ad97;
  color: #39ad97;
  margin: 20px auto;
  border-radius: 40px;
}
.sampling {
  padding-top: 20px;
  border-top: 1px solid #ddd;
  margin-top: 30px;
}
.sampling p {
  color: #686868;
  font-size: 14px;
  line-height: 30px;
}
.sampling .btn {
  width: 60%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #39ad97;
  background: #39ad97;
  color: #fff;
  margin: 20px auto;
  border-radius: 40px;
}
</style>
